<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>数据看板</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />
    <script src="../../../js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>

    <script src="../js/util.js" type="text/javascript"></script>
    <style>
        .row_class {
            width: calc(100% - 40px);
            background-color: #fff;
            margin-left: 20px;
            margin-top: 10px;
            padding: 10px 10px;
            border-radius: 12px;
        }

        .boldText {
            font-weight: bolder;
            font-size: larger;
        }

        .smallText {
            font-size: small;
        }

        .right_arrow {
            margin-top: 15px;
            margin-left: 5px;
            height: 14px;
            width: 8px;
            border-radius: 6px;
            background: url(../images/boardArrow.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="is-loading">
        <div class="curtain">
            <div class="loadingBgc">
                <div class="loader"></div>
            </div>
        </div>
    </div>
    <div class="trainTickets" style="height: calc(100% - 20px)">
        <div class="header_tit">
            <van-nav-bar title="应用看板" left-arrow>
                <template #left>
                    <div class="back_l" @click="home">
                        <img src="../../../image/left.png" alt="" />
                    </div>
                </template>
                <template #right>
                </template>
            </van-nav-bar>
        </div>
        <div>
            <van-row class="row_class">
                <van-col span="22">
                    <van-row>
                        <span class="boldText">{{totalUserCount}}</span>
                        <span class="smallText">人</span>
                    </van-row>
                    <van-row>
                        <span class="smallText">注册用户数</span>
                    </van-row>
                </van-col>
                <van-col span="2" class="right_arrow">
                </van-col>
                
            </van-row>

            <van-row class="row_class">
                <van-col span="22">
                    <van-row >
                        <span class="boldText">{{activeUserCount}}</span>
                        <span class="smallText">人</span>
                    </van-row>
                    <van-row>
                        <span class="smallText">日活用户数</span>
                    </van-row>
                </van-col>
                <van-col span="2" class="right_arrow">
                </van-col>
                
            </van-row>

            <van-row class="row_class">
                <van-col span="22">
                    <van-row >
                        <span class="boldText">{{functionClickCount}}</span>
                        <span class="smallText">次</span>
                    </van-row>
                    <van-row>
                        <span class="smallText">功能使用次数</span>
                    </van-row>
                </van-col>
                <van-col span="2" class="right_arrow">
                </van-col>
                
            </van-row>

            <van-row class="row_class">
                <van-col span="22">
                    <van-row >
                        <span class="boldText">{{unitCoverage}}%</span>
                    </van-row>
                    <van-row>
                        <span class="smallText">单位覆盖率</span>
                    </van-row>
                </van-col>
                <van-col span="2" class="right_arrow">
                </van-col>
                
            </van-row>

            <van-row class="row_class">
                <van-col span="22">
                    <van-row >
                        <span class="boldText">{{majorCoverage}}%</span>
                    </van-row>
                    <van-row>
                        <span class="smallText">专业覆盖率</span>
                    </van-row>
                </van-col>
                <van-col span="2" class="right_arrow">
                </van-col>
                
            </van-row>
        </div>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isflageIOX: true,
                searchWidth: 24,
                loading: false,
                isSearchFocused: false,
                finished: true,
                searchParams: "",
                clipboard: {
                    content: "",
                },
                totalUserCount: 0,
                totalUserList: [],
                activeUserCount: 0,
                activeUserList: [],
                functionClickCount: 0,
                functionClickList: [],
                unitCoverage: 0,
                majorCoverage: 0,
                provinceId: "",
                dayTime: ""
            }
        },
        watch: {

        },
        created() {
            const _this = this
            let jsApiList = []
            $.getScript("../../../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/, function () {
                'use strict';
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'onHistoryBack',
                ];
                wx.config({
                    beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: corpid,
                    timestamp: '1626832073',
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: jsApiList
                });
            });

            this.dayTime = this.getTodayDate();
            this.getProvinceId();

        },
        mounted() {
            this.compatibleInput()
            this.getProvinceToTalData()
        },
        methods: {
            getProvinceToTalData() {
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = ""
                }
                let data = {
                    "dayTime": this.dayTime,
                    "provinceId": this.provinceId,
                    "timestamp": new Date().getTime() + "",
                };
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                data = JSON.stringify(data)
                let sign = sm3(data);
                $.ajax({
                    url: localUrlLink + iscp_port + "/tjAiAssistant/dataStatistics/selectTotalData",
                    type: "post",
                    async: false, //是否同步，false表示同步请求
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign
                    },
                    success: (res, txt, xhr) => {
                        if(res.code == 500) {
                            mui.toast('该用户省份暂时不在统计范围中', {
                                duration: 1000,
                                type: 'div'
                            })
                        }
                        let provinceId = this.provinceId;
                        this.totalUserCount = res.resultValue.totalUserCount.totalCount;
                        this.totalUserList = res.resultValue.totalUserCount.list;
                        this.activeUserCount = res.resultValue.activeUserCount.totalCount;
                        this.activeUserList = res.resultValue.activeUserCount.list;
                        this.functionClickCount = res.resultValue.functionClickCount.totalCount;
                        this.functionClickList = res.resultValue.functionClickCount.list;
                        if (provinceId != "") {
                            let unitCoverage =  res.resultValue.unitCoverage[provinceId];
                            let allDouble = unitCoverage.allDouble;
                            let cityDouble = unitCoverage.cityDouble;
                            let countrysideDouble = unitCoverage.countrysideDouble;
 
                            if (allDouble > 0) {
                                this.unitCoverage = allDouble;
                            } else if (allDouble == 0 && cityDouble > 0) {
                                this.unitCoverage = cityDouble;
                            }
                            this.majorCoverage = res.resultValue.majorCoverage;
                        }
                    },
                    error: (e) => {
                        $(".curtain").css("display", "none");
                        mui.toast('请稍后再试', {
                            duration: 1000,
                            type: 'div'
                        })
                    },
                });
            },
            getProvinceId() {
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = ""
                }
                const userId = sessionStorage.getItem("userId");
                let data = {
                    "userId": userId,
                    "timestamp": new Date().getTime() + "",
                };
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                data = JSON.stringify(data)
                let sign = sm3(data);
                $.ajax({
                    url: localUrlLink + iscp_port + "/tjAiAssistant/dataStatistics/selectProvinceIdByUserId",
                    type: "post",
                    async: false, //是否同步，false表示同步请求
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign
                    },
                    success: (res, txt, xhr) => {
                        this.provinceId = res.resultValue; 
                    },
                    error: (e) => {
                        $(".curtain").css("display", "none");
                        mui.toast('请稍后再试', {
                            duration: 1000,
                            type: 'div'
                        })
                    },
                });
            },
            getTodayDate() {
                const today = new Date();
                let year = today.getFullYear();
                // 获取月份，月份是从0开始的，所以要+1  
                // 使用padStart来确保月份和日期总是两位数  
                let month = (today.getMonth() + 1).toString().padStart(2, '0');
                // 获取日期  
                let day = today.getDate().toString().padStart(2, '0');
                // 拼接成字符串  
                return `${year}-${month}-${day}`;
            },
            // 判断安卓还是ios
            compatibleInput() {
                //获取浏览器的userAgent,并转化为小写
                var ua = navigator.userAgent.toLowerCase();
                //判断是否是苹果手机，是则是true
                var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
                if (isIos) {
                    this.isflageIOX = true;
                } else {
                    this.isflageIOX = false;
                }
            },
            home() {
                $(location).attr("href", "../../Home.html");
            },
            createSgin(data) {
                let hashData = sm3(data);
                let hashData_last = sm3(hashData);
                hashData_last = hashData_last.substr(0, 5);
                hashData += hashData_last;
                let sign = hashData;
                return sign;
            },
        }
    })
</script>
</body>
</html>